<!DOCTYPE html>
<html>
<head>
	<title>放大镜</title>
	<meta charset="utf-8">
	<style type="text/css">
	*{margin: 0;padding: 0}
	#div1 { width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; }

 #small { width: 200px; height: 200px; background: #eee; position: relative; }
 #small img{ width: 200px; height: 200px;}
.float { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; }

#div1 .mark {width:100%; height:100%; position:absolute; z-index:-1; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;}
#big { position: absolute; top: -1px; left: 215px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; }
#big img { position:absolute; top: -30px; left: -80px; }
</style>

	</style>
</head>
<body>

	<div id="div1">

    <div id="small">
		<span class="mark"></span>
        <span class="float"></span>
        <a href="#"><img src="img/2.jpg" alt="妙味课堂 - 放大镜图片一" longdesc="http://www.miaov.com" /></a>
    </div>

    <div id="big">
		<img src="img/1.jpg" alt="妙味课堂 - 放大镜图片二" longdesc="http://www.miaov.com" />
	</div>

</div>



</body>
</html>
<script type="text/javascript">
	var _small=document.getElementById('small')
	var _big=document.getElementById('big');
	var _mark=_small.children[0]
	var _float=_small.children[1];
	var _img1=_small.children[2];
	var _img2=_big.children[0];

	
	_small.onmouseover=function ()
	{
		_float.style.display='block';
		_big.style.display='block';
	};
	
	_small.onmouseout=function ()
	{
		_float.style.display='none';
		_big.style.display='none';
	};
	
	_small.onmousemove=function (ev)
	{
		var oEvent=ev||event;
		
		var l=oEvent.clientX-_small.offsetLeft-_float.offsetWidth/2;
		var t=oEvent.clientY-_small.offsetTop-_float.offsetHeight/2;
		
		if(l<0)
		{
			l=0;
		}
		else if(l>_small.offsetWidth-_float.offsetWidth)
		{
			l=_small.offsetWidth-_float.offsetWidth;
		}
		
		if(t<0)
		{
			t=0;
		}
		else if(t>_small.offsetHeight-_float.offsetHeight)
		{
			t=_small.offsetHeight-_float.offsetHeight;
		}
		
		_float.style.left=l+'px';
		_float.style.top=t+'px';
		
		var percentX=l/(_small.offsetWidth-_float.offsetWidth);
		var percentY=t/(_small.offsetHeight-_float.offsetHeight);
		
		_img2.style.left=-percentX*(_img2.offsetWidth-_big.offsetWidth)+'px';
		_img2.style.top=-percentY*(_img2.offsetHeight-_big.offsetHeight)+'px';
	};
		



</script>